<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="100px">
            <el-form-item label="申请单标题" prop="applyTitle">
                <el-input
                        v-model="queryParams.applyTitle"
                        placeholder="请输入申请单标题"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="申请单号" prop="purApplyId">
                <el-input
                        v-model="queryParams.purApplyId"
                        placeholder="请输入申请单号"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="发起人" prop="applyUser">
                <el-input
                        v-model="queryParams.applyUser"
                        placeholder="请输入发起人"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="发起人姓名" prop="applyUserName">
                <el-input
                        v-model="queryParams.applyUserName"
                        placeholder="请输入公司名称"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="所属部门" prop="deptName">
                <el-input
                        v-model="queryParams.deptName"
                        placeholder="请输入部门名称"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="创建时间">
                <el-date-picker
                        v-model="dateRange"
                        size="small"
                        style="width: 240px"
                        value-format="yyyy-MM-dd"
                        type="daterange"
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                ></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table v-loading="loading" border :data="applyBillList">
            <el-table-column label="申请单号" align="center" prop="purApplyId" width="120"/>
            <el-table-column label="标题" align="center" prop="applyTitle" :show-overflow-tooltip="true"/>
            <el-table-column label="申请人姓名" align="center" prop="applyUserName" width="100"/>
            <el-table-column label="所属部门" align="center" prop="deptName" :show-overflow-tooltip="true"/>
            <el-table-column label="创建时间" align="center" prop="createTime" width="160">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.createTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="状态" align="center" prop="approvalStatus" :show-overflow-tooltip="true"/>
            <el-table-column label="审批环节" align="center" prop="approvalNode" :show-overflow-tooltip="true"/>
            <el-table-column label="审批人" align="center" prop="approvalUser" :show-overflow-tooltip="true"/>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="270">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-circle-check"
                            @click="submitApproval(scope.row)"
                            v-show="scope.row.approvalStatus=='未提交'"
                    >发起申请
                    </el-button>
                    <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-edit"
                            @click="handleUpdate(scope.row)"
                            v-show="scope.row.approvalStatus=='未提交'"
                    >修改
                    </el-button>
                    <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-delete"
                            @click="handleDelete(scope.row)"
                            v-show="scope.row.approvalStatus=='未提交'"
                    >删除
                    </el-button>
                    <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-view"
                            @click="handleView(scope.row)"
                            v-show="scope.row.approvalStatus!='未提交'"
                    >查看申请单
                    </el-button>
                    <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-document"
                            @click="handleHistoryList(scope.row)"
                            v-show="scope.row.approvalStatus!='未提交'"
                    >审批历史
                    </el-button>
                    <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-picture-outline"
                            @click="handleHistoryImg(scope.row)"
                            v-show="scope.row.approvalStatus!='未提交'"
                    >进度查看
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination
                v-show="total>0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
        />
        <modifyApplyBill
                :dialogFormVisible="modifyApplyBillVisible"
                :formData="formData"
                :viewFlag="viewFlag"
                @cancel="modifyApplyBillCancel">
        </modifyApplyBill>
        <!--审批历史信息查看-->
        <ProcessListHistory
                :title="processHisTitle"
                :dialogFormVisible="processHisVisible"
                :historyList="processHistoryList"
                @cancel="processHisVisible = false">
        </ProcessListHistory>
        <ProcessImg
                :title="processImgTitle"
                :dialogFormVisible="processImgVisible"
                :imgUrl="processImgUrl"
                @cancel="processImgVisible = false">
        </ProcessImg>
    </div>
</template>

<script>
    import {listApplyBill,delApplyBill,queryGoodsBillAndUserInfo,submitApproval} from "@/api/purchase/apply.js";
    import {listHistory,showProcessImg} from "@/api/process/general.js";

    import ProcessListHistory from "@/views/components/process/processListHistory";
    import ProcessImg from "@/views/components/process/processImg";
    import modifyApplyBill from "@/views/purchase/apply/modifyApplyBill";

    export default {
        name: "listApplyBill",
        components: {modifyApplyBill,ProcessListHistory,ProcessImg},
        data() {
            return {
                // 遮罩层
                loading: true,
                // 总条数
                total: 0,
                // 申请单表格数据
                applyBillList: [],
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    applyTitle: undefined,
                    applyUser: undefined,
                    applyUserName: undefined,
                    deptName: undefined,
                    purApplyId: undefined
                },
                // 日期范围
                dateRange: [],
                modifyApplyBillVisible: false,
                formData: undefined,
                viewFlag: true,
                processHisTitle: "",
                processHisVisible: false,
                processHistoryList: [],
                processImgTitle: "",
                processImgVisible: false,
                processImgUrl: "",
            };
        },
        created() {
            this.getList();
        },
        methods: {
            /** 查询仓库列表 */
            getList() {
                this.loading = true;
                listApplyBill(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
                    this.applyBillList = response.rows;
                    this.total = response.total;
                    this.loading = false;
                });
            },
            /** 查询按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("queryForm");
                this.handleQuery();
            },
            submitApproval(row){
                let app = this;
                app.$confirm('确认发起该采购申请单的申请？', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function () {
                    submitApproval(row).then(response => {
                        if (response.code === 200) {
                            app.msgSuccess("采购申请发起成功，请等到领导审批！");
                            app.getList();
                        } else {
                            app.msgError(response.msg);
                        }
                    });
                });
            },
            /** 修改按钮操作 */
            handleUpdate(row) {
                this.viewFlag = true;
                queryGoodsBillAndUserInfo(row).then(response => {
                    row.roles = response.data.roleNames;
                    row.posts = response.data.postNames;
                    row.purApplyGoodsBillVoList = response.data.purApplyGoodsBillList;
                });
                //this.formData = Object.assign({},row);
                this.formData = row;
                this.$set(this.formData,'purApplyId',row.purApplyId);
                this.$set(this.formData,'applyTitle',row.applyTitle);
                this.$set(this.formData,'roles',row.roles);
                this.$set(this.formData,'posts',row.posts);
                this.$set(this.formData,'purApplyGoodsBillVoList',row.purApplyGoodsBillVoList);
                this.$set(this.formData,'deleteGoodsList',[]);
                this.modifyApplyBillVisible = true;
            },
            modifyApplyBillCancel(){
                this.getList();
                this.modifyApplyBillVisible = false
            },
            handleView(row) {
                this.viewFlag = false;
                queryGoodsBillAndUserInfo(row).then(response => {
                    row.roles = response.data.roleNames;
                    row.posts = response.data.postNames;
                    row.purApplyGoodsBillVoList = response.data.purApplyGoodsBillList;
                });
                //this.formData = Object.assign({},row);
                this.formData = row;
                this.$set(this.formData,'purApplyId',row.purApplyId);
                this.$set(this.formData,'roles',row.roles);
                this.$set(this.formData,'posts',row.posts);
                this.$set(this.formData,'purApplyGoodsBillVoList',row.purApplyGoodsBillVoList);
                this.$set(this.formData,'deleteGoodsList',[]);
                this.modifyApplyBillVisible = true;
            },
            handleHistoryList(row){
                var queryData = {instanceId: row.approvalInstanceId};
                listHistory(queryData).then(
                    response => {
                        this.processHistoryList = response.data;
                        this.processHisTitle = "查看审批历史信息";
                        this.processHisVisible = true;
                    }
                );
            },
            handleHistoryImg(row){
                this.processImgUrl = showProcessImg(row.approvalInstanceId);
                this.processImgTitle = "查看审批进度";
                this.processImgVisible = true;
            },
        }
    };
</script>




